<template>
  <div class="big">
    <div class="top">
      <span class="txt">有了</span>
      <p @click="search()">
        <van-icon name="search" />
        <span>搜索职位/公司/内容</span>
        <input type="text" />
      </p>
      <span class="bag">
        <van-icon name="bag-o" />
      </span>
      <img
        src="https://img.bosszhipin.com/beijin/upload/avatar/20200427/9743d5e87850e514bb000e463723d7ecb4188d951b0217589d0705d4f22256b0_s.jpg?x-oss-process=image/resize,w_100,limit_0"
        alt=""
      />
    </div>

    <div class="nav">
      <ul>
        <li v-for="(v,i) in arr" :key="i">
          <img :src="v.imgurl" alt="" />
          <span>{{v.txt}}</span>
        </li>
      </ul>
    </div>

    <div class="box">
      <div class="d1 b1" @click="baike()">
        <img src="img/b1.jpg" alt="" />
        <p>
          <span>职业剥百科</span>
          <span>探索职业百态</span>
        </p>
      </div>
      <div class="d1 b2" @click="zhibo()">
        <img src="img/b2.jpg" alt="" />
        <p>
          <span>校招直播</span>
          <span>往期回放</span>
        </p>
      </div>
    </div>

    <div class="block">
      <p @click="funobj($event)">
        <span @click="fun('about')">关注</span>
        <span @click="fun('tuijian')">推荐</span>
        <span @click="fun('word')">好文</span>
        <span @click="fun('speak')">问答</span>
      </p>
      <component :is="com"></component>
    </div>
    <bom-bar />
  </div>
</template>

<script>
import about from "@/components/mode/about.vue";
import word from "@/components/mode/word.vue";
import tuijian from "@/components/mode/tuijian.vue";
import speak from "@/components/mode/speak.vue";
export default {
  components: {
    about,
    word,
    tuijian,
    speak,
  },
  methods: {
    funobj(obj) {
      // console.log(obj.target.parentNode.childNodes);
      obj.target.parentNode.childNodes.forEach(function(item){
        item.classList.remove('active')
      })
      obj.target.classList.add('active')
    },
    fun(data) {
      this.com = data;
    },
    search(){
      this.$router.push('/search')
    },
    baike(){
      this.$router.push('/baike')
    },
    zhibo(){
      this.$router.push('/zhibo')
    }
  },
  data() {
    return {
      com: "about",
      arr:[
        {imgurl:"img/1.jpg",txt:"今日热榜"},
        {imgurl:"img/2.jpg",txt:"学生圈"},
        {imgurl:"img/3.jpg",txt:"求职冒险"},
        {imgurl:"img/4.jpg",txt:"找公司"},
        {imgurl:"img/5.jpg",txt:"面试题"},
        {imgurl:"img/6.jpg",txt:"仲裁厅"},
        {imgurl:"img/7.jpg",txt:"求职锦囊"},
        {imgurl:"img/8.jpg",txt:"就业辅导"},
        {imgurl:"img/9.jpg",txt:"职业测评"},
        {imgurl:"img/10.jpg",txt:"职测"}
      ]
    };
  },
};
</script>

<style scoped>
.active {
  border-bottom: 0.04rem solid #39c0ba;
  font-size: 0.16rem;
  font-weight: bold;
}
.big {
  background: #f0f0f0;
}
.top {
  width: 100%;
  height: 0.55rem;
  background: #39c0ba;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  color: #fff;
}
.top > .txt {
  width: 0.52rem;
  font-size: 0.26rem;
  font-family: cursive;
}
.top > p {
  width: 1.90rem;
  position: relative;
  color: #fff;
}
.top > p > i {
  font-size: 0.14rem;
  position: absolute;
  top: 0.08rem;
  left: 0.16rem;
}
.top > p > span {
  font-size: 0.14rem;
  position: absolute;
  top: 0.05rem;
  left: 0.36rem;
}
.top > p > input {
  width: 100%;
  height: 0.30rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0.20rem;
  padding-left: 0.40rem;
  box-sizing: border-box;
  font-size: 0.12rem;
  border: 0;
}
.top > .bag {
  width: 0.26rem;
  font-size: 0.26rem;
}
.top > img {
  width: 0.26rem;
  height: 0.26rem;
  border-radius: 50%;
}

/* nav */
.nav {
  /* margin-top: 0.6rem; */
  display: flex;
  overflow-x: auto;
  background: #fff;
}
.nav > ul {
  display: flex;
}
.nav > ul > li {
  width: 0.75rem;
  height: 0.80rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.nav > ul > li > img {
  width: 0.30rem;
  height: 0.30rem;
}
.nav > ul > li > span {
  font-size: 0.12rem;
}

/* box */
.box {
  display: flex;
  background: #fff;
}
.box > .d1 {
  height: 0.60rem;
  margin: 0.10rem;
  background: #defffd;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  box-sizing: border-box;
  border-radius: 0.10rem;
}
.box > .b1 {
  margin-right: 0.05rem;
}
.box > .b2 {
  margin-left: 0.05rem;
}

.box > .d1 > img {
  width: 0.40rem;
  height: 0.40rem;
  margin-right: 0.06rem;
}
.box > .d1 > p {
  display: flex;
  flex-direction: column;
  width: 1.00rem;
  height: 0.40rem;
  margin-left: 0.06rem;
}
.box > .d1 > p span:nth-child(1) {
  font-size: 0.16rem;
  font-weight: bold;
  color: #666;
}
.box > .d1 > p span:nth-child(2) {
  font-size: 0.16rem;
  color: #aaa;
}

/* block */
.block {
  margin-top: 0.06rem;
}
.block > p {
  height: 0.45rem;
  border-bottom: 0.01rem solid #aaa;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #fff;
  padding-top: 0.10rem;
  position: sticky;
  top: 0;
  z-index: 2;
}
.block > p > span {
  margin-left: 0.20rem;
  padding: 0.05rem 0;
}
</style>